<template>
	<login-register title="用户注册" tips="输入以下相关信息进行注册">
		<el-form ref="form" size="medium" :rules="formRules" :model="formData">
			<el-form-item prop="userName">
				<el-input prefix-icon="sw-icon-login-user" placeholder="输入您的姓名" v-model="formData.userName" />
			</el-form-item>
			<el-form-item prop="account">
				<el-input prefix-icon="sw-icon-login-email" placeholder="输入您的电子邮箱" v-model="formData.account" />
			</el-form-item>
			<el-form-item prop="filed1">
				<el-select v-model="formData.filed1" popper-class="register_post" placeholder="请选择您的职称" style="width: 100%">
					<i slot="prefix" class="el-input__icon sw-icon-job-title"></i>
					<el-option v-for="(item, index) in dictEnums['USER_POST']" :key="index" :label="item.content" :value="item.content" />
				</el-select>
			</el-form-item>
			<el-form-item prop="filed2">
				<el-input prefix-icon="sw-icon-depart" placeholder="输入您的单位名称" v-model="formData.filed2"></el-input>
			</el-form-item>
			<el-form-item prop="phone">
				<el-input prefix-icon="sw-icon-telephone" placeholder="输入您的联系电话" maxlength="11" v-model="formData.phone"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input prefix-icon="sw-icon-login-pass" placeholder="输入您的登录密码" v-model="formData.password" show-password></el-input>
			</el-form-item>
			<el-form-item prop="confirmpass">
				<el-input prefix-icon="sw-icon-login-pass" placeholder="输入您的确认密码" v-model="formData.confirmpass" show-password></el-input>
			</el-form-item>
			<el-form-item>
				<el-button class="submit" type="primary" @click="handleSubmitRegister" :loading="btnLoading">注册</el-button>
			</el-form-item>
		</el-form>
	</login-register>
</template>

<script>
import rsa from '@/utils/rsa';
import { mapGetters } from 'vuex';
import { register } from '@/api/login';
import loginRegister from '@/views/common/loginRegister';
export default {
	components: { loginRegister },
	data() {
		const passRule = this.$getPassRules(this.$store.getters.siteInfo);
		const passValidator = (rule, value, callback) => {
			if (!this.formData.password) {
				callback(new Error('请输入登录密码'));
			} else if (this.formData.password !== value) {
				callback(new Error('登录密码和确认密码不一致'));
			} else {
				callback();
			}
		};
		return {
			formData: {},
			formRules: {
				userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
				account: [
					{ required: true, message: '请输入电子邮件地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的电子邮件地址', trigger: 'blur' }
				],
				filed1: [{ required: true, message: '请选择职称', trigger: 'change' }],
				filed2: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
				phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
				password: [
					{ required: true, message: '请输入登录密码', trigger: 'blur' },
					{ pattern: passRule.rules, message: passRule.message, trigger: 'blur' }
				],
				confirmpass: [
					{ required: true, message: '请输入确认密码', trigger: 'blur' },
					{ validator: passValidator, trigger: 'blur' }
				]
			},
			btnLoading: false
		};
	},
	computed: { ...mapGetters(['dictEnums']) },
	methods: {
		//提交登录
		handleSubmitRegister() {
			this.$refs['form'].validate((vaild) => {
				if (!vaild) return false;
				this.btnLoading = true;
				this.registerRequest();
			});
		},

		//格式化注册参数
		formatRegisterParmas() {
			let params = this.$deepClone(this.formData);
			params = { ...params, type: '2', systemKey: '2' };
			params['password'] = rsa.rsaPublicData(params.password);
			params['picId'] = '-1';
			return params;
		},

		//登录请求
		async registerRequest(data) {
			let params = this.formatRegisterParmas();
			let result = await register(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.$alert('注册信息已提交，请等待管理员审核', '注册提醒', {
					type: 'success',
					confirmButtonText: '登录',
					callback: (action) => {
						this.$router.back();
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.register_post .el-select-dropdown__item {
	font-size: 16px;
}
</style>
